<template>
  <div class="container">
    <h1>{{state.name}}--{{ state.age }}</h1>
    <h1>{{name}}--{{ age }}</h1>
    <button @click="state.age++">年龄+1</button>
    <h1>{{dogName}}--{{ dogAge }}</h1>
    <button @click="dogAge++">年龄+1</button>

  </div>
</template>

<script>
import { reactive,toRefs,toRef } from 'vue'
export default {
  setup () {
    // 定义数据和函数
    const state =reactive({
      name:'zp',
      age:18
    })

    const dog=reactive({
      name:'谢志欢',
      age:35
    })
    // 返回给模板使用
    return {
      state,
      ...toRefs(state),
      dogName: toRef(dog,'name'),
      dogAge: toRef(dog,'age'),
    }
  }
}
</script>
